<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Document</title>
  </head>
  <body>
    <!-- 登录： 
    1.⽤户名必须包含数字和字⺟，不能有特殊字符（⾮ a-z 0-9）,⻓度  >=5以上
    2.密码必须包含⼤写以及⾄少⼀个特殊字符，⻓度>=8
    3.当点击登陆时，如果⽤户名和密码符合要求，需要提示验证合格信，不符合则在指定 input 标签处提示红⾊错误信息 -->
    <p id="p1">用户名：<input type="text" placeholder="请输入用户名" id="username" /></p>
    <p id="p2">密码：<input type="text" placeholder="请输入密码" id="password" /></p>
    <button onclick="sign()">登录</button>
    <script>
      function sign() {
        var username = document.getElementById('username').value
        var password = document.getElementById('password').value
        // 用户名的值
        // 判断用户名是否符合要求，符合则什么都没有，不符合则输出
        if (/\w+/.test(username) == false || username.length < 5) {
          let user = document.createElement('span')
          user.innerText = '输入错误'
          document.getElementById('p1').appendChild(user)
        }

        // 密码的值
        // 判断密码是否符合要求，符合则什么都没有，不符合则输出
        if (/^[A-Z]{1,}[0-9]+\W{1,}$/.test(password) == false || password.length < 8) {
          let psd = document.createElement('span')
          psd.innerText = '输入错误'
          document.getElementById('p2').appendChild(psd)
        }

        // 判断⽤户名和密码是否符合要求
        if (/\w+/.test(username) != false && username.length >= 5 && /^[A-Z]{1,}[0-9]+\W{1,}$/.test(password) != false && password.length >= 8) {
          alert('登录成功')
        } else {
          alert('用户名/密码输入错误')
        }
      }
    </script>
  </body>
</html>
